<template>
	<div class="app-login">
		<img class="app-login__background" src="@/assets/img/background.png" />
		<a-card :title="environment.AppTitle" :bordered="false">
			<a-form
				:model="store"
				name="basic"
				:label-col="{ span: 8 }"
				:wrapper-col="{ span: 16 }"
				autocomplete="off"
			>
				<a-form-item
					name="username"
					:wrapper-col="{ span: 24 }"
					:rules="rules.username"
				>
					<a-input
						v-model:value="store.username"
						:placeholder="$t('common.login.userplaceholder')"
						size="large"
					>
						<template #prefix>
							<UserOutlined />
						</template>
					</a-input>
				</a-form-item>

				<a-form-item
					name="password"
					:wrapper-col="{ span: 24 }"
					:rules="rules.password"
				>
					<a-input-password
						v-model:value="store.password"
						:placeholder="$t('common.login.pwdplaceholder')"
						size="large"
						:visibilityToggle="false"
					>
						<template #prefix>
							<LockOutlined />
						</template>
					</a-input-password>
				</a-form-item>

				<a-form-item class="app-login__buttons" :wrapper-col="{ span: 24 }">
					<a-button type="primary" size="large" @click="handleLogin">{{
						$t('common.login.login')
					}}</a-button>
					<a-button type="primary" size="large" @click="handleReset">{{
						$t('common.login.reset')
					}}</a-button>
				</a-form-item>
			</a-form>
			<template #actions>
				<div class="app-login__footer">
					<div class="app-login__footer__caption">
						{{ $t('common.login.other') }}
					</div>
					<div class="app-login__footer__content">
						<img
							src="@/assets/img/dingding.svg"
							class="third-svg-container"
							:title="$t('common.login.dingding')"
							draggable="false"
							@click="handleThridLogin('DINGDING')"
						/>
						<img
							src="@/assets/img/qiyeweixin.svg"
							class="third-svg-container"
							:title="$t('common.login.wxwork')"
							draggable="false"
							@click="handleThridLogin('WXWORK')"
						/>
					</div>
				</div>
			</template>
		</a-card>
	</div>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
interface FormState {
	username: string;
	password: string;
}
const store = reactive<FormState>({
	username: '',
	password: '',
});
const rules = reactive({
	username: [
		{
			required: true,
			message: `${App.ts('common.login.userplaceholder', '请输入用户名')}!`,
		},
	],
	password: [
		{
			required: true,
			message: `${App.ts('common.login.pwdplaceholder', '请输入密码')}!`,
		},
	],
});

const environment = App.getEnvironment();
const useForm = Form.useForm;
const route: any = useRoute();
const { push } = useRouter();

const handleLogin = () => {
	const { validate } = useForm(store, rules);
	validate(['username', 'password'])
		.then((result) => {
			App.login(store.username, store.password);
		})
		.catch((error) => {
			message.error(App.ts('common.login.loginmsg'));
		});
};

const handleReset = () => {
	store.username = '';
	store.password = '';
};

const handleThridLogin = (type: string) => {
	if (!type) return;
	switch (type) {
		case 'DINGDING':
			console.warn(`暂不支持钉钉登录`);
			break;
		case 'WXWORK':
			console.warn(`暂不支持企业微信登录`);
			break;
		default:
			console.warn(`暂不支持${type}登录`);
			break;
	}
};

onMounted(() => {
	//  清除应用加载遮罩
	App.closeAppLoadding();
});
</script>
